<template>
  <div style="margin: 50px;">
    <button  @click="addPic">拍照</button>
    
  </div>
</template>

<script>
import wx from "wx";

export default {
  name: "photo",
  data() {
    return {
      urls: "index.html#/about",
      contents: [],
      imgItems: [], // 图片数组
      serverIds: [] // 存储多图的serverId
    };
  },
  computed: {
    showUploadBtn() {
      if (this.imgItems.length) return true;
      else return false;
    }
  },
  created() {
    let signLink =  /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : localStorage.entryUrl;
    alert(signLink)
    let wx_valid = 'http://test.leerhuo.com/wxapi/valid/wxconfig'
    this.serverIds.length = 0; // 初始化
    //TODO:微信图片上传--页面验证
    const getWxValid = () => {
      this.axios({
        method: "get",
        url: wx_valid,
        params: {
          pageurl: signLink
        }
      }).then(function(rsp) {
          wxconfig(rsp.data);
        }).catch(err=>{
            alert(JSON.stringify(err))
          })
    };
    const wxconfig = datas => {
      alert(JSON.stringify(datas))
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: datas.appId, // 必填，公众号的唯一标识
        nonceStr: datas.nonceStr, // 必填，生成签名的随机串
        timestamp: datas.timestamp, // 必填，生成签名的时间戳
        signature: datas.signature, // 必填，签名，见附录1
        jsApiList: [
          "checkJsApi",
          "chooseImage",
          "previewImage",
          "uploadImage",
          "downloadImage",
          "translateVoice"
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
    };
    wx.hideMenuItems({
      menuList: [
        "menuItem:share:appMessage",
        "menuItem:share:timeline",
        "menuItem:share:qq",
        "menuItem:share:weiboApp",
        "menuItem:share:facebook",
        "menuItem:share:QZone",
        "menuItem:copyUrl",
        "menuItem:originPage",
        "menuItem:openWithQQBrowser",
        "menuItem:openWithSafari"
      ] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
    });

    
      // getWxValid();
  },
  methods: {
    init() {},
    addPic() {
      let _this = this;
      wx.chooseImage({
        count: 9, // 默认9
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
          let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          _this.imgItems = _this.imgItems.concat(localIds);
        },
        fail: function(res) {
          alert(JSON.stringify(res));
        }
      });
    },
    
  },
  mounted() {
    this.init();
  }
};
</script>

<style>
.yd-ls-photo-grids-box:after {
  display: block;
  margin: 0 1rem;
  content: "";
  border-bottom: 1px dotted red;
  border-spacing: 10px;
  position: absolute;
  top: 1.1rem;
  left: 0;
  right: 0;
  z-index: 1;
}
.yd-ls-photo-grids-box a {
  z-index: 2;
}
.yd-ls-photo-grids-box .yd-grids-icon i {
  width: 1.14rem;
  line-height: 1.14rem;
  height: 1.14rem;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
}
.yd-ls-photo-grids-box .yd-grids-icon {
  height: 1.4rem;
}
.yd-ls-photo-grids-box .yd-grids-item .yd-grids-icon i {
  background-color: #fce9e0;
}
.yd-ls-photo-list .yd-grids-item .yd-grids-icon {
  height: 1.4rem;
  width: 1.4rem;
  text-align: center;
}
.yd-ls-photo-list .yd-grids-item .yd-grids-icon img {
  height: 100%;
  width: inherit;
  display: inline-block;
}
</style>